<template>
	<button class="jec-button" :class="[type]" hover-class="is-hover" :loading="loading" :disabled="loading">
		<text class="jec-button__value">
			<slot></slot>
		</text>
	</button>
</template>

<script setup>
	defineProps({
		type: {
			type: String,
			default: ''
		},
		loading: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss">
.jec-button {
	width: 100%;
	height: 96rpx;
	border-radius: 10rpx;
	.jec-button__value {
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 4rpx;
	}
	&.primary {
		background-color: $uni-color-primary !important;
	}
	&[disabled] {
		opacity: 0.8;
	}
	&[loading]:before {
		width: 18px;
		height: 18px;
		margin-left: -28px;
		margin-right: 10px;
	}
}
.is-hover {
	opacity: 0.8;
}
</style>